<template>
    <div class="container">
        <div class="header">
            <span>状态：</span>
            <el-select class="status-select" v-model="state" size="small" placeholder="请选择">
                <el-option label="全部" value></el-option>
                <el-option label="未付款" :value="101"></el-option>
                <el-option label="用户取消" :value="102"></el-option>
                <el-option label="到时自动取消" :value="103"></el-option>
                <el-option label="已付款" :value="201"></el-option>
                <el-option label="待评价" :value="402"></el-option>
            </el-select>
            <el-select class="status-select" v-model="isappwith" size="small" placeholder="请选择">
                <el-option label="全部" value></el-option>
                <el-option label="未提现" value="0"></el-option>
                <el-option label="已提现" value="1"></el-option>
            </el-select>
            <el-date-picker
                v-model="times"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="handDateChange"
                clearable
                size="small"
            ></el-date-picker>
            <el-input
                class="goodsName"
                v-model="goodsName"
                size="small"
                placeholder="商品名"
                clearable
                @clear="getData"
            ></el-input>
            <el-input
                class="goodsName"
                v-model="orderSn"
                size="small"
                placeholder="订单号"
                clearable
                @clear="getData"
            ></el-input>
            <el-input
                class="goodsName"
                v-model="brandName"
                size="small"
                placeholder="商家"
                clearable
                @clear="getData"
            ></el-input>
            <el-button type="primary" size="small" @click="getData" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" size="small" @click="exportFile">导出</el-button>
        </div>
        <el-table :data="list" style="width: 100%" v-loading="loading">
            <el-table-column prop="ordersn" label="订单号"></el-table-column>
            <el-table-column prop="goodsName" label="商品名"></el-table-column>
            <el-table-column label="商品图">
                <template #default="scope">
                    <el-image
                        style="width: 80px; height: 80px"
                        :src="scope.row.goodspic"
                        :preview-src-list="[scope.row.goodspic]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="brandname" label="商家"></el-table-column>
            <el-table-column prop="username" label="用户"></el-table-column>
            <el-table-column prop="orderprice" label="订单金额"></el-table-column>
            <el-table-column prop="actualprice" label="支付金额"></el-table-column>
            <el-table-column prop="addtime" label="支付时间"></el-table-column>
            <el-table-column prop="updatetime" label="变更时间"></el-table-column>
            <el-table-column prop="appwith" label="商家提现">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.appwith" type="primary" size="mini">已提现</el-tag>
                    <el-tag v-else size="mini">未提现</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 101" size="mini">{{scope.row.statusname}}</el-tag>
                    <el-tag v-if="scope.row.status === 102" size="mini">{{scope.row.statusname}}</el-tag>
                    <el-tag v-if="scope.row.status === 103" size="mini">{{scope.row.statusname}}</el-tag>
                    <el-tag
                        v-if="scope.row.status === 201"
                        size="mini"
                        type="success"
                    >{{scope.row.statusname}}</el-tag>
                    <el-tag
                        v-if="scope.row.status === 402"
                        size="mini"
                        type="success"
                    >{{scope.row.statusname}}</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="list.length" class="pagination">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page.num"
                :page-size="page.size"
                layout="total, prev, pager, next"
                :total="page.total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import * as request from '@/api/order'
import { downloadFile } from '@/utils'
import { Loading } from 'element-ui';
export default {
    data() {
        return {
            state: '',
            isappwith: '',
            times: '',
            goodsName: '',
            brandName: '',
            orderSn: '',
            begintime: '',
            endtime: '',
            list: [],
            orderList: [],
            loading: false,
            audit: '',
            page: {
                size: 10,
                num: 1,
                total: 0,
            },
            downloading: false
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        handDateChange() {
            if (this.times) {
                this.begintime = this.times[0] + ' 00:00:00'
                this.endtime = this.times[1] + ' 00:00:00'
            } else {
                this.begintime = ''
                this.endtime = ''
            }
        },
        handleCurrentChange(val) {
            this.page.num = val
            this.getData()
        },

        /* 获取列表数据 */
        async getData() {
            this.loading = true
            let query = {
                status: this.state,
                goodsName: this.goodsName,
                brandName: this.brandName,
                orderSn: this.orderSn,
                isappwith: this.isappwith,
                begintime: this.begintime,
                endtime: this.endtime,
                page: this.page.num,
                size: this.page.size,
            }
            try {
                const { errno, data, errmsg } = await request.getList(query)
                if (errno === 0) {
                    this.list = data.list || []
                    this.page.total = data.size
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
            this.loading = false
        },
        exportFile() {
            const loading = Loading.service({text: '正在导出中...'})
            const params = {
                status: this.state,
                goodsName: this.goodsName,
                brandName: this.brandName,
                orderSn: this.orderSn,
                isappwith: this.isappwith,
                begintime: this.begintime,
                endtime: this.endtime,
                page: this.page.num,
                size: this.page.size,
            }
            downloadFile('/sini/admin/excel/export', params).then(() => {
                loading.close()
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
}
.header {
    margin-bottom: 20px;
    .status-select {
        margin-right: 20px;
    }
    .goodsName {
        width: 200px;
        margin: 0 10px;
    }
}
.pagination {
    margin: 25px 0;
    text-align: center;
}
</style>
